<template>
  <div class="prev-container">
    <div class="img-wrapper">
      <img :src="imgPath" :style="imgStyle" />
    </div>
    <div class="indicator">
      <el-icon @click="operate('zoomIn')">
        <!-- 放大 -->
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ea893728=""
        >
          <path
            fill="currentColor"
            d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
          ></path>
        </svg>
      </el-icon>
      <el-icon @click="operate('zoomOut')">
        <!-- 缩小 -->
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ea893728=""
        >
          <path
            fill="currentColor"
            d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
          ></path>
        </svg>
      </el-icon>
      <el-icon @click="operate('reset')">
        <!-- 重置 -->
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ea893728=""
        >
          <path
            fill="currentColor"
            d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z"
          ></path>
        </svg>
      </el-icon>
      <el-icon @click="operate('close')">
        <!-- 关闭 -->
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ea893728=""
        >
          <path
            fill="currentColor"
            d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
          ></path>
        </svg>
      </el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

defineOptions({
  name: 'prev-img',
})

const imgPath = ref(
  'https://oss.xinjiaoyu.com/exam/test/182769/15987/20231108_0fc5b03fb8c14158b54fa3e5b78c48f0_1/001_page.jpg?x-oss-process=image/rotate,0/quality,q_80',
)

const transform = ref({
  scale: 1,
  translateX: 0,
  translateY: 0,
  rotate: 0,
})
const imgStyle = computed(() => {
  const { scale, translateX, translateY, rotate } = transform.value
  return {
    transform: `scale(${scale}) translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`,
  }
})
const operate = (type: string) => {
  switch (type) {
    case 'zoomIn':
      transform.value.scale += 0.1
      break
    case 'zoomOut':
      transform.value.scale -= 0.1
      break
    case 'reset':
      transform.value.scale = 1
      transform.value.translateX = 0
      transform.value.translateY = 0
      transform.value.rotate = 0
      break
    case 'close':
      break
    default:
      break
  }
}
</script>

<style lang="scss">
.prev-container {
  .img-wrapper {
    width: 100%;
    height: calc(100vh - 100px - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    overflow: scroll;
    img {
      transition: all 0.5s;
    }
  }
  .indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    .el-icon {
      cursor: pointer;
      font-size: 30px;
      padding: 10px;
      box-sizing: content-box;
    }
  }
}
</style>
